<template>
<div id="container" v-cloak >
    <div id="bd">
     <div style="height: 20px;"></div>
          <div style="font-size: 16px;font-weight: bold;margin-left: 16px;height: 37px;">填写理赔资料</div>
           <div style="margin-left:1%;vertical-align: top; display:inline-block;width:90%">
              <el-form ref="form" :model="form" label-width="80px">

              <div class="subfild-content">
                <el-form-item label="保险单号" style="width: 50%;" label-width="150px" required>
                <el-input v-model="order.id" :disabled="true" style="width: 300px;"></el-input>
              </el-form-item>
              <!-- <el-form-item label="业务编号" style="width: 50%;" label-width="150px" required>
                <el-input v-model="ywcode" disabled="true" style="width: 300px;"></el-input>
              </el-form-item> -->
          </div>

          <el-form-item label="损失类型" style="width: 50%;" label-width="150px" required>
              <el-radio-group v-model="record.safetype" style="top:12px;position: relative;">
              <el-radio :label="1">人伤</el-radio>
              <el-radio :label="2">物损</el-radio>
              <el-radio :label="3">车损</el-radio>
         </el-radio-group>
         </el-form-item>


    <div class="subfild-content">

          <el-form-item label="出险原因" style="width: 50%;" label-width="150px">
        <el-select v-model="record.reasonindex" placeholder="请选择" @change="setreason">
       <el-option v-for="(item,index) in reasons" :label="item.name" :key="index" :value="index">{{item.name}}</el-option>
 
                
        </el-select>
      </el-form-item>



      <el-form-item label="出险时间" style="width: 50%;" label-width="150px">
          <el-date-picker
          v-model="record.eventtimeori"
          type="datetime"
          placeholder="选择日期">
        </el-date-picker>
  </el-form-item>


 </div>

 <div class="subfild-content">

    <el-form-item label="事故地点" style="width: 50%;" label-width="150px" required>
        <el-radio-group v-model="record.eventaddress" style="top:12px;position: relative;">
            <el-radio :label="0">境内</el-radio>
            <el-radio :label="1">境外</el-radio>
       </el-radio-group>
</el-form-item>






</div>           

      <div class="subfild-content">

        <el-form-item label="事故所在地区" style="width: 50%;" label-width="150px" required >
          <el-input v-model="record.detailaddress" placeholder="请选择事故发生地区" style="width: 220px" @focus="sgareaFormVisible=true"></el-input>
      </el-form-item>
           <el-dialog @close="setdetailaddress" title="请选择事故发生地区" :visible.sync="sgareaFormVisible">
 

<el-cascader
			  placeholder="请选择公司所在区域"
    :options="optionsadd"
    @change="changeposition"
    ref="cc"
		change-on-select
		v-model="selectoptions"
		expand-trigger="hover"
		style="width: 250px;">
	</el-cascader>




               
        </el-dialog>
        
        <el-form-item label="详细地址" style="width: 50%;" label-width="150px" required>
          <el-input v-model="record.detailaddress2" placeholder="请输入内容" style="width: 220px"></el-input>
      </el-form-item>
      </div>

      <div class="subfild-content">

        <el-form-item label="事故经过" style="width: 50%;" label-width="150px" required >
          <el-input
          type="textarea"
          placeholder="请输入事故详细经过"
          v-model="record.description"
          rows=5
          show-word-limit
        >
        </el-input>
      </el-form-item>
      <el-form-item label="预计损失（元）" style="width: 50%;" label-width="150px" required>
        <el-input v-model="record.sunshi" placeholder="请输入内容" style="width: 220px"></el-input>
</el-form-item>

      </div>
      <div class="subfild-content">

          <el-form-item label="被保险人" style="width: 50%;" label-width="150px" required>
              <!-- <el-input id='baoanren' v-model="bname" placeholder="请输入内容" style="width: 220px"></el-input> -->
              <el-autocomplete
             
              style="width:220px"
  v-model="bname"
  :fetch-suggestions="querySearchAsync"
  placeholder="请输入内容"
  @select="handleSelect"
></el-autocomplete>
      </el-form-item>
      
      <el-form-item label="身份证号" style="width: 50%;" label-width="150px" >
        <el-input v-model="record.card" placeholder="请输入内容" style="width: 220px" readonly></el-input>
</el-form-item>
      

      </div>


      <div class="subfild-content">

        <el-form-item label="联系电话" style="width: 50%;" label-width="150px" required>
          <el-input v-model="record.phone" placeholder="请输入内容" style="width: 220px"></el-input>
        </el-form-item>
    
    
    
        <el-form-item label="收款人户名" style="width: 50%;" label-width="150px" required>
          <el-input v-model="record.huming" placeholder="请输入内容"style="width: 220px" ></el-input>
  </el-form-item>
    
    
    </div>

      <div class="subfild-content">

  
      <el-form-item label="收款银行账户" style="width: 50%;" label-width="150px" required>
          <el-input v-model="record.zhanghu" placeholder="请输入内容" style="width: 220px"></el-input>
      </el-form-item>
      <el-form-item label="开户银行" style="width: 50%;" label-width="150px">
        <el-select id='kaihuhang' v-model="record.clientBankCode" placeholder="请选择" @change="setbankname">
            <el-option label="" value="">请选择开户银行</el-option>
  <el-option v-for="lo in banks" :label="lo.label" :value="lo.value" :key="lo.value"></el-option>

            <!-- <el-option  label="中国工商银行"  value="102">中国工商银行</el-option>
        <el-option label="中国银行"   value="104">中国银行</el-option>
        <el-option label="招商银行"   value="308">招商银行</el-option>
        <el-option label="交通银行"   value="301">交通银行</el-option>
        <el-option label="平安银行"   value="307">平安银行</el-option>
        <el-option label="中国光大银行"   value="303">中国光大银行</el-option>
        <el-option label="上海浦东发展银行"   value="310">上海浦东发展银行</el-option>
        <el-option label="广发银行"   value="306">广发银行</el-option>
        <el-option label="上海银行"   value="A01">上海银行</el-option>
        <el-option label="中国民生银行"   value="305">中国民生银行</el-option>
        <el-option label="兴业银行"   value="309">兴业银行</el-option>
        <el-option label="农村商业银行"   value="314">农村商业银行</el-option>
        <el-option label="华夏银行"   value="304">华夏银行</el-option>
        <el-option label="徽商银行"   value="319">徽商银行</el-option>
        <el-option label="江苏银行"   value="A05">江苏银行</el-option>
        <el-option label="哈尔滨银行"   value="A63">哈尔滨银行</el-option>
        <el-option label="德阳银行"   value="C20">德阳银行</el-option>
        <el-option label="北京银行"   value="A02">北京银行</el-option>
        <el-option label="东莞银行"   value="C04">东莞银行</el-option>
        <el-option label="宁波银行"   value="A03">宁波银行</el-option>
        <el-option label="广州银行"   value="B89">广州银行</el-option>
        <el-option label="富滇银行"   value="C45">富滇银行</el-option>
        <el-option label="天津银行"   value="A07">天津银行</el-option>
        <el-option label="渤海银行"   value="318">渤海银行</el-option>
        <el-option label="重庆银行"   value="C16">重庆银行</el-option>
        <el-option label="杭州银行"   value="A06">杭州银行</el-option>
        <el-option label="吉林银行"   value="A55">吉林银行</el-option>
        <el-option label="广西北部湾银行"   value="C06">广西北部湾银行</el-option>
        <el-option label="大连银行"   value="A42">大连银行</el-option>
        <el-option label="长沙银行"   value="B65">长沙银行</el-option>
        <el-option label="农村信用联社"   value="B65">农村信用联社</el-option>
        <el-option label="乌鲁木齐市商业银行"   value="D02">乌鲁木齐市商业银行</el-option>
        <el-option label="贵阳银行"   value="C36">贵阳银行</el-option>
        <el-option label="南京银行"   value="A76">南京银行</el-option>
        <el-option label="汉口银行"   value="B53">汉口银行</el-option>
        <el-option label="台州银行"   value="A86">台州银行</el-option>
        <el-option label="绵阳市商业银行"   value="C21">绵阳市商业银行</el-option>
       
     <el-option label="龙江银行"   value="D29">龙江银行</el-option>
     <el-option label="河北银行"   value="A08">河北银行</el-option>
     <el-option label="南昌银行"   value="B10">南昌银行</el-option>
     <el-option label="宁夏银行"   value="D28">宁夏银行</el-option>
     <el-option label="烟台银行"   value="B26">烟台银行</el-option>
     <el-option label="兰州银行"   value="C78">兰州银行</el-option>
     <el-option label="浙商银行"   value="316">浙商银行</el-option>
     <el-option label="郑州银行"   value="B36">郑州银行</el-option>
     <el-option label="锦州银行"   value="A47">锦州银行</el-option>
     <el-option label="恒丰银行"   value="315">恒丰银行</el-option>
     <el-option label="营口银行"   value="A48">营口银行</el-option>
     <el-option  label="晋商银行"  value="A19">晋商银行</el-option>
     <el-option label="浙江泰隆商业银行"   value="D26">浙江泰隆商业银行</el-option>
     <el-option label="青岛银行"   value="B22">青岛银行</el-option>
     <el-option  label="青海银行"  value="C92">青海银行</el-option>
     <el-option  label="威海银行"  value="B30">威海银行</el-option>
     <el-option  label="攀枝花市商业银行"  value="C18">攀枝花市商业银行</el-option>
     <el-option label="东营银行"   value="B25">东营银行</el-option>
     <el-option label="日照银行"   value="D21">日照银行</el-option>
     <el-option label="昆仑银行"   value="D03">昆仑银行</el-option>
     <el-option label="齐商银行"   value="B23">齐商银行</el-option>
     <el-option label="张家口市商业银行"   value="A14">张家口市商业银行</el-option>
     <el-option label="潍坊银行"   value="B27">潍坊银行</el-option>
     <el-option label="海峡银行"   value="B01">海峡银行</el-option>
     <el-option label="包包典当"   value="A31">包包典当</el-option>
     <el-option label="临商银行"   value="B34">临商银行</el-option>
     <el-option label="柳州银行"   value="C07">柳州银行</el-option>
     <el-option label="葫芦岛银行"   value="D22">葫芦岛银行</el-option>
     <el-option label="济宁银行"   value="B28">济宁银行</el-option>
     <el-option label="厦门银行"   value="B02">厦门银行</el-option>
     <el-option label="邯郸银行"   value="A11">邯郸银行</el-option>
     <el-option label="赣州银行"   value="B16">赣州银行</el-option>
     <el-option label="晋城银行"   value="A23">晋城银行</el-option>
     <el-option label="上饶银行"   value="B18">上饶银行</el-option>
     <el-option label="泰安市商业银行"   value="B29">泰安市商业银行</el-option>
     <el-option label="内蒙古银行"   value="A30">内蒙古银行</el-option>
     <el-option label="中国建设银行"   value="105">中国建设银行</el-option>
     <el-option label="中国农业银行"   value="103">中国农业银行</el-option>
     <el-option label="浙江民泰商业银行"   value="D25">浙江民泰商业银行</el-option>
     <el-option label="洛阳银行"   value="B38">洛阳银行</el-option>
     <el-option label="绍兴银行"   value="A81">绍兴银行</el-option>
     <el-option label="沧州银行"   value="A16">沧州银行</el-option>
     <el-option label="德州银行"   value="B32">德州银行</el-option>
     <el-option label="湖州银行"   value="A80">湖州银行</el-option>
     <el-option label="阜新银行"   value="A49">阜新银行</el-option>
     <el-option label="苏州银行"   value="D30">苏州银行</el-option>
     <el-option label="温州银行"   value="A78">温州银行</el-option>
     <el-option label="南阳市商业银行"   value="B51">南阳市商业银行</el-option>
     <el-option label="商丘银行"   value="B48">商丘银行</el-option>
     <el-option label="承德银行"   value="A15">承德银行</el-option>
     <el-option label="邢台银行"   value="A12">邢台银行</el-option>
     <el-option label="开封市商业银行"   value="B37">开封市商业银行</el-option>
     <el-option label="漯河银行"   value="B46">漯河银行</el-option>
     <el-option label="鄂尔多斯银行"   value="A39">鄂尔多斯银行</el-option>
     <el-option label="韩国新韩银行"   value="595">韩国新韩银行</el-option>
     <el-option label="韩国中小企业银行"   value="596">韩国中小企业银行</el-option>
     <el-option label="韩亚银行"   value="597">韩亚银行</el-option>
     <el-option label="韩国外换银行"   value="591">韩国外换银行</el-option>
     <el-option label="莱商银行"   value="D23">莱商银行</el-option>
     <el-option  label="浙江稠州商业银行"  value="D32">浙江稠州商业银行</el-option>
     <el-option label="鄞州银行"   value="798">鄞州银行</el-option> -->
        </el-select>
      </el-form-item>
      
      </div>


      <div class="subfild-content">
      <el-form-item label="上传身份证正面" style="width: 50%;" label-width="150px" required>
          <el-upload
  class="avatar-uploader"
  action="/dev-api/mapi/member/uploadPicture"
  :show-file-list="false"
  :on-success="handleAvatarSuccessa"
  :before-upload="beforeAvatarUpload">
  <img v-if="imga" :src="imga" class="avatar">
  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
  </el-form-item>
  <el-form-item label="上传身份证反面" style="width: 50%;" label-width="150px" required>
    <el-upload
class="avatar-uploader"
action="/dev-api/mapi/member/uploadPicture"
:show-file-list="false"
:on-success="handleAvatarSuccessb"
:before-upload="beforeAvatarUpload">
<img v-if="imgb" :src="imgb" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</el-form-item>
      
      </div>


      <div class="subfild-content">
        <el-form-item label="上传损失情况照片" style="width: 50%;" label-width="150px" required>
            <el-upload
    class="avatar-uploader"
    action="/dev-api/mapi/member/uploadPicture"
    :show-file-list="false"
    :on-success="handleAvatarSuccessc"
    :before-upload="beforeAvatarUpload">
    <img v-if="imgc" :src="imgc" class="avatar">
    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
  </el-upload>
    </el-form-item>
    <el-form-item label="上传赔付协议照片" style="width: 50%;" label-width="150px" required>
      <el-upload
  class="avatar-uploader"
  action="/dev-api/mapi/member/uploadPicture"
  :show-file-list="false"
  :on-success="handleAvatarSuccessd"
  :before-upload="beforeAvatarUpload">
  <img v-if="imgd" :src="imgd" class="avatar">
  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
  </el-upload>
  </el-form-item>
        
        </div>

        <div class="subfild-content">
          <el-form-item label="小额案件快速理赔表照片" style="width: 50%;" label-width="150px" required>
              <el-upload
      class="avatar-uploader"
      action="/dev-api/mapi/member/uploadPicture"
      :show-file-list="false"
      :on-success="handleAvatarSuccesse"
      :before-upload="beforeAvatarUpload">
      <img v-if="imge" :src="imge" class="avatar">
      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
      </el-form-item>
      <el-form-item label="责任核定说明照片（可选）" style="width: 50%;" label-width="150px" required>
        <el-upload
    class="avatar-uploader"
    action="/dev-api/mapi/member/uploadPicture"
    :show-file-list="false"
    :on-success="handleAvatarSuccessf"
    :before-upload="beforeAvatarUpload">
    <img v-if="imgf" :src="imgf" class="avatar">
    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
    </el-form-item>
          
          </div>

          <div class="subfild-content">
            <el-form-item label="其他" style="width: 50%;" label-width="150px" required>
                <el-upload
        class="avatar-uploader"
        action="/dev-api/mapi/member/uploadPicture"
        :show-file-list="false"
        :on-success="handleAvatarSuccessg"
        :before-upload="beforeAvatarUpload">
        <img v-if="imgg" :src="imgg" class="avatar">
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
        </el-form-item>

            
            </div>

      
      </el-form>
      <div style="display: block;width:100%;text-align: center">
      <el-button type="primary" @click="saverecord">提交案件</el-button>
    </div>
        </div>    
                
 <!-- <div style="display:inline-block;width:29%">
    <div style="text-align: center;font-size: 16px;"><a onclick="Hideshow()">查看保险价格</a></div>
                <div id="jiage" style="display:none;">
                <img src="img/zren.png?temp=<%=Math.random()%>" style="width:100%">
                <img src="img/yiwai.png?temp=<%=Math.random()%>" style="width:100%;margin-top: 30px;">
                <img src="img/yiwai2.png?temp=<%=Math.random()%>" style="width:100%;margin-top: 30px;">
            </div>
                
            </div> -->
            

      
            
     </div>
     
    </div>
</template>
<script>
import { getmember ,addmember,addpossiblemember} from '@/api/policy'

import $ from 'jquery'
import { regionData } from 'element-china-area-data'
  export default {
    name:'lpsq',
    data() {
      return {
        banks:[{label:"中国工商银行"  ,value:"102"},{label:"中国银行"   ,value:"104"},{label:"招商银行"   ,value:"308"},{label:"交通银行"   ,value:"301"},{label:"平安银行"   ,value:"307"},{label:"中国光大银行"   ,value:"303"},{label:"上海浦东发展银行"   ,value:"310"},{label:"广发银行"   ,value:"306"},{label:"上海银行"   ,value:"A01"},{label:"中国民生银行"   ,value:"305"},{label:"兴业银行"   ,value:"309"},{label:"农村商业银行"   ,value:"314"},{label:"华夏银行"   ,value:"304"},{label:"徽商银行"   ,value:"319"},{label:"江苏银行"   ,value:"A05"},{label:"哈尔滨银行"   ,value:"A63"},{label:"德阳银行"   ,value:"C20"},{label:"北京银行"   ,value:"A02"},{label:"东莞银行"   ,value:"C04"},{label:"宁波银行"   ,value:"A03"},{label:"广州银行"   ,value:"B89"},{label:"富滇银行"   ,value:"C45"},{label:"天津银行"   ,value:"A07"},{label:"渤海银行"   ,value:"318"},{label:"重庆银行"   ,value:"C16"},{label:"杭州银行"   ,value:"A06"},{label:"吉林银行"   ,value:"A55"},{label:"广西北部湾银行"   ,value:"C06"},{label:"大连银行"   ,value:"A42"},{label:"长沙银行"   ,value:"B65"},{label:"农村信用联社"   ,value:"B66"},{label:"乌鲁木齐市商业银行"   ,value:"D02"},{label:"贵阳银行"   ,value:"C36"},{label:"南京银行"   ,value:"A76"},{label:"汉口银行"   ,value:"B53"},{label:"台州银行"   ,value:"A86"},{label:"绵阳市商业银行"   ,value:"C21"},{label:"龙江银行"   ,value:"D29"},{label:"河北银行"   ,value:"A08"},{label:"南昌银行"   ,value:"B10"},{label:"宁夏银行"   ,value:"D28"},{label:"烟台银行"   ,value:"B26"},{label:"兰州银行"   ,value:"C78"},{label:"浙商银行"   ,value:"316"},{label:"郑州银行"   ,value:"B36"},{label:"锦州银行"   ,value:"A47"},{label:"恒丰银行"   ,value:"315"},{label:"营口银行"   ,value:"A48"},{label:"晋商银行"  ,value:"A19"},{label:"浙江泰隆商业银行"   ,value:"D26"},{label:"青岛银行"   ,value:"B22"},{label:"青海银行"  ,value:"C92"},{label:"威海银行"  ,value:"B30"},{label:"攀枝花市商业银行"  ,value:"C18"},{label:"东营银行"   ,value:"B25"},{label:"日照银行"   ,value:"D21"},{label:"昆仑银行"   ,value:"D03"},{label:"齐商银行"   ,value:"B23"},{label:"张家口市商业银行"   ,value:"A14"},{label:"潍坊银行"   ,value:"B27"},{label:"海峡银行"   ,value:"B01"},{label:"包包典当"   ,value:"A31"},{label:"临商银行"   ,value:"B34"},{label:"柳州银行"   ,value:"C07"},{label:"葫芦岛银行"   ,value:"D22"},{label:"济宁银行"   ,value:"B28"},{label:"厦门银行"   ,value:"B02"},{label:"邯郸银行"   ,value:"A11"},{label:"赣州银行"   ,value:"B16"},{label:"晋城银行"   ,value:"A23"},{label:"上饶银行"   ,value:"B18"},{label:"泰安市商业银行"   ,value:"B29"},{label:"内蒙古银行"   ,value:"A30"},{label:"中国建设银行"   ,value:"105"},{label:"中国农业银行"   ,value:"103"},{label:"浙江民泰商业银行"   ,value:"D25"},{label:"洛阳银行"   ,value:"B38"},{label:"绍兴银行"   ,value:"A81"},{label:"沧州银行"   ,value:"A16"},{label:"德州银行"   ,value:"B32"},{label:"湖州银行"   ,value:"A80"},{label:"阜新银行"   ,value:"A49"},{label:"苏州银行"   ,value:"D30"},{label:"温州银行"   ,value:"A78"},{label:"南阳市商业银行"   ,value:"B51"},{label:"商丘银行"   ,value:"B48"},{label:"承德银行"   ,value:"A15"},{label:"邢台银行"   ,value:"A12"},{label:"开封市商业银行"   ,value:"B37"},{label:"漯河银行"   ,value:"B46"},{label:"鄂尔多斯银行"   ,value:"A39"},{label:"韩国新韩银行"   ,value:"595"},{label:"韩国中小企业银行"   ,value:"596"},{label:"韩亚银行"   ,value:"597"},{label:"韩国外换银行"   ,value:"591"},{label:"莱商银行"   ,value:"D23"},{label:"浙江稠州商业银行"  ,value:"D32"},{label:"鄞州银行"   ,value:"798"}],

        optionsadd:regionData,
       selectoptions:[],
        restaurants:[],
          listcode:[['A01','N0397'],['A01','N0263'],['A01','N0254'],['A01','N0396'],['A01','N0096'],['A01','N0101'],['A01','N0226'],['A01','N0036'],['A01','N0055'],['A01','N0397'],['A01','N0416']],


        reasons:[{name:'坠落、摔倒、滑到',index:0},{name:'食物中毒',index:1},{name:'烧烫伤',index:2},{name:'溺水事故',index:3},{name:'电梯、游乐设施及其他设备事故',index:4},{name:'动物咬伤、抓伤等伤害',index:5},{name:'其他意外事故',index:6},{name:'财务丢失',index:7},{name:'车辆损失责任',index:8},{name:'其他财产损失',index:9}],
            members:[],
            memberindex:-1,
        order:{},
        pics:{qt:[],ssqk:[],sqs:[],carda:{},cardb:{},pfxy:[],kslpb:[]},
        imga:'',
        imgb:'',
        imgc:'',
        imgd:'',
        imge:'',
        imgf:'',
        imgg:'',
        record:{safetype:1,eventaddress:0},
        areaList:'',
        banklist:'',
        shiguddress:'',
        shigumiaoshu:'',
        skbankcode:'',
        skname:'',
        yujisunshi:'',
        sgarea:'',
        bname:'',
        sgareaFormVisible:false,
      
        bxcode:'123123123123123123',
        ywcode:'343242342432342342',
        reason:'',
        sstype:'',
        sgdidian:'',
        cxtime:'',
        beiname:'',
        guanxi:'',
        beicard:'',
        beiphone:'',
        tableData: [{
          id: 1,
          beicard: '2016-05-02',
          beiname: '王小虎',
          beiphone: '13932432423432',
          guanxi:'本人'
        }, {
          id: 2,
          beicard: '2016-05-02',
          beiname: '王小虎',
          beiphone: '13932432423432',
          guanxi:'本人'
        }, {
          id: 3,
          beicard: '2016-05-02',
          beiname: '王小虎',
          beiphone: '13932432423432',
          guanxi:'本人',
          children: [{
              id: 31,
              beicard: '2016-05-02',
              beiname: '王小虎',
              beiphone: '13932432423432',
              guanxi:'配偶'
            }, {
              id: 32,
              beicard: '2016-05-02',
              beiname: '王小虎',
              beiphone: '13932432423432',
              guanxi:'子女'
          }]
        }, {
          id: 4,
              beicard: '2016-05-02',
              beiname: '王小虎',
              beiphone: '13932432423432',
              guanxi:'本人'
        }],
        starttime:'',
        imageUrl: '',
        lianxiname:'',
        nashuiren:'',
        hangye:'',
        guimo:'',
        lianxiphone:'',
        comname:'',
        comaddress:'',
        comustor:'',
        comtype:'',
        endtime:'',
        value: [],
        form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: '',
          options: [
          {
          value: 'pingan',
          label: '平安保险',
          children: [
                {
                   value: 'huangjinxing',
                   label: '黄金型',
                }, 
                {
                   value: 'baijinxing',
                   label: '白金型',

                }, 
                {
                   value: 'zuanshixing',
                   label: '钻石型',

                }]
        },
        {
          value: 'taian',
          label: '泰安保险',
          children: [
                {
                   value: 'huodongzuzhi',
                   label: '活动组织责任险',
                }, 
                {
                   value: 'huodongyiwai',
                   label: '活动意外险',

                }]
        }

      ]
        },
        
    }
    },
 mounted(){
      this.order=JSON.parse(sessionStorage.getItem('order'));
      this.getmembers();
//       $('#distpicker').distpicker({
//   province: '浙江省',
//   city: '杭州市',
//   district: '西湖区'
// });  
      // this.areaList=areadata2;
    },
    methods: {
        changeposition(re){
              console.log( re); 
 
   this.$nextTick(function(){

     var dts=this.$refs.cc.getCheckedNodes();
  var a='',b='',c='',acode='',bcode='',ccode='';
  console.log(dts)
  var node=dts[0];
    while(node)
    {
       a=node.label+a;
       node=node.parent;
    }
    if(re.length>0)
   {
// a=dts[0].parent.parent.label;
acode=re[0]
   }
 if(re.length>1)
 {
// b=dts[0].parent.label;
bcode=re[1];
 }
 if(re.length>2)
 {
// c=dts[0].label;
ccode=re[2]
 }
    this.record.provincecode=acode;

  this.record.citycode=bcode;
   

  this.record.addcode=ccode;
  this.record.detailaddress=a;
   })

      },
          querySearchAsync(queryString, cb) {
        var restaurants = this.members;
        var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;

        clearTimeout(this.timeout);
        this.timeout = setTimeout(() => {
          cb(results);
        }, 3000 * Math.random());
      },
      createStateFilter(queryString) {
        return (state) => {
          return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) !=-1);
        };
      },
      handleSelect(suggestion) {
        console.log(suggestion);
        this.bname=suggestion.username;
        this.record.phone=suggestion.phone;
        this.record.huming=suggestion.username;
        this.record.card=suggestion.creditcard;
        this.memberindex=suggestion.index;
//         var _that=this;
//             _that.memberindex=suggestion.index;
//     console.log(_that.members)
//     console.log(_that.memberindex)
//     _that.record.phone=_that.members[_that.memberindex].phone;
//  _that.record.huming=_that.members[_that.memberindex].username;
//  _that.record.card=_that.members[_that.memberindex].creditcard;
//  _that.$forceUpdate();
      },
      setdetailaddress(){
  //      this.record.detailaddress=$('#detailaddress').val()+$('#detailaddresscity').val()+$('#detailaddressdistrict').val();
  //      var provincecode=$('#detailaddress').find("option:selected").attr('data-code');
  //     var citycode=$('#detailaddresscity').find("option:selected").attr('data-code');
  //     var districtcode=$('#detailaddressdistrict').find("option:selected").attr('data-code');
  //     console.log("provincecode:"+provincecode);
 
  // this.record.provincecode=provincecode;
  // this.record.citycode=citycode;
  // this.record.addcode=districtcode;
        this.sgareaFormVisible=false;

      },
      init(){
//         this.sgareaFormVisible = true;console.log('313113131')
//         this.$nextTick(function(){
//           $('#distpicker').distpicker({
//   province: '浙江省',
//   city: '杭州市',
//   district: '西湖区'
// }); 


//         })
       
      },
      confirm(dt)
      {
        console.log(dt)
      },
      cancel(dt){
           console.log(dt)
      },
      setreason(dt){
        console.log('reason')
        console.log(dt)
        // this.record.reason='';
      },
      setbankname(dt){
        console.log('kaihuhang')
        console.log(dt)
  let obj = {};
      obj = this.banks.find((item)=>{
        return item.value === dt;
      });
     this.record.kaihuhang = obj.label;
       },
        getmembers()
    {
             var that=this;
          $.ajax({
        async : false,    //表示请求是否异步处理
        type : "get",    //请求类型
        url : "/dev-api/mapi/customer/getmembersbypolicyid",//请求的 URL地址
        dataType : "json",//返回的数据类型
        data:{
       
          policyid:that.order.id
        
        },
        success: function (data) {
          console.log(data);  //在控制台打印服务器端返回的数据
           if(data.code==200)
           {
           that.members=data.result;
           for(var i=0;i<data.result.length;i++)
           {
           data.result[i].index=i;
            data.result[i].value=data.result[i].username+' '+data.result[i].cardtype+' '+data.result[i].creditcard;
            data.result[i].data=data.result[i].username;
           
           }
          //  var _that=that;
//          $('#baoanren').autocomplete({
//     lookup: data.result,
//     onSelect: function (suggestion) {
//     _that.memberindex=suggestion.index;
//     console.log(_that.members)
//     console.log(_that.memberindex)
//     _that.record.phone=_that.members[_that.memberindex].phone;
//  _that.record.huming=_that.members[_that.memberindex].username;
//  _that.record.card=_that.members[_that.memberindex].creditcard;
//  _that.$forceUpdate();

//         console.log('You selected: ' + suggestion.username+" index:"+suggestion.index);
//     }
// });
           
            
      /*
        var baoanren = document.form1.baoanren;
        

      
      baoanren.length = data.result.length+1;

        //循环将数组中的数据写入<option>标记中
           
        
          //修改省份列表的默认选择项
         var index = 0;
       baoanren.selectedIndex = index;
            for(var i=0;i<data.result.length;i++)
            {
           
                 baoanren.options[i+1].text = data.result[i].username+' '+data.result[i].cardtype+' '+data.result[i].creditcard;
            baoanren.options[i+1].value = i;
                     
                     
                     
                       
                       }*/
                       
           }
           else
           {
           that.$toast(data.message);
           }
      
        },
        error:function (data) {
           that.$toast("输入有误");
        }
    });    
            
     },
      isRealNum(val){
    // isNaN()函数 把空串 空格 以及NUll 按照0来处理 所以先去除
    if(val === "" || val ==null){
        return false;
    }
    if(!isNaN(val)){
        return true;
    }else{
        return false;
    }
} ,
        saverecord()
{
 var record=this.record;
 record.orderid=this.order.id;
  if(!this.bname||this.memberindex==-1)
 {
     this.$toast('未选择被保险人');
     return;
 
 }
 
 else if(!record.eventtimeori)
 {
     this.$toast('出险时间未输入');
 
 }
//  else if(document.form1.detailaddress.value==''||document.form1.detailaddresscity.value==''||document.form1.detailaddressdistrict.value=='')
//  {
//  if(document.form1.detailaddress.value=='')
//      this.$toast('所在地区-省份未输入');
//     else if(document.form1.detailaddresscity.value=='')
//      this.$toast('所在地区-市 未输入');
//     else if(document.form1.detailaddressdistrict.value=='')
//      this.$toast('所在地区-区县 未输入');
 
//  }
 else if(!record.detailaddress)
 {
 
     this.$toast('所在地区 未输入');
 
 }
 else if(!record.detailaddress2)
 {
     this.$toast('详细地址未输入');
 
 }
 else  if(!record.description)
 {
     this.$toast('事故经过未输入');
 
 }
 else if(!record.sunshi)
 {
     this.$toast('预计损失未输入');
 
 }
 else if(!this.isRealNum(record.sunshi))
 {
 
  this.$toast('预计损失应该为数字');
 }
  else if(!record.phone)
 {
     this.$toast('联系电话未输入');
 
 }
 else if(!record.huming)
 {
     this.$toast('收款人户名未输入');
 
 }
 else if(!record.zhanghu)
 {
     this.$toast('收款银行账号未输入');
 
 }
 else if(!record.clientBankCode)
 {
    this.$toast('开户行未选择');
 }
   
  
 else if(!this.pics.carda.src)
 {
   console.log(this.pics.carda)
   this.$toast('身份证正面照照片未上传');
 
 }
  else if(!this.pics.cardb.src)
 {
   this.$toast('身份证反面照照片未上传');
 
 }
 else if(this.pics.pfxy.length==0)
 {
  this.$toast('赔付协议未上传');
 }
 else if(this.pics.ssqk.length==0)
 {
  this.$toast('损失情况未上传');
 }
//  else if(this.pics.sqs.length==0)
//  {
//   this.$toast('责任核定说明未上传');
//  }
 else if(this.pics.kslpb.length==0)
 {
  this.$toast('快速理赔表未上传');
 }
   
 else
 {
  var member=this.members[parseInt(this.memberindex)];
  console.log(member);
  record.userid=member.id;
   record.unitofshunshi=1;//是否考虑美元

  
  // record.eventaddress=document.form1.eventaddress.value;
    // var eventtime = new Date(Date.parse($('#eventtime').val().replace(/-/g, "/"))).getTime();
  
    record.eventtime=new Date(record.eventtimeori).getTime();
    if(!record.reasonindex)
 {
    this.$toast('出险原因未选择');
    return;
 }
   
   record.reason=this.reasons[record.reasonindex].name;
  // record.safetype=document.form1.safetype.value;
    //  record.kaihuhang=$('#kaihuhang').find("option:selected").text();
     console.log('开户行'+record.kaihuhang)
  //  record.clientBankCode=$('#kaihuhang').val();
  //  var reasonindex=document.form1.reason.selectedIndex;
  //  console.log('reasonindex:'+reasonindex);
     record.accidentCauseLevel1=this.listcode[record.reasonindex][0];
     record.accidentCauseLevel2=this.listcode[record.reasonindex][1];
  //record.images="";
  
    // var pics={};
      
    //   pics.carda=carda;
    //   pics.cardb=cardb;
    //  //  pics.cardc=cardc;
    //   pics.pfxy=pfxy;
    //   pics.kslpb=kslpb;
    //   pics.sqs=sqs;
    //   pics.ssqk=ssqk;
    //   pics.qt=qt;
        record.images=JSON.stringify(this.pics);
        console.log(record)
  
  this.$loadingshow();
  var that=this;
$.ajax({
        async : true,    //琛ㄧず璇锋眰鏄惁寮傛澶勭悊
        type : "post",    //璇锋眰绫诲瀷
        url : "/dev-api/mapi/user/saverecordtoyoubao",//璇锋眰鐨�URL鍦板潃
        dataType : "json",//杩斿洖鐨勬暟鎹被鍨�
       contentType: "application/json", //必须这样写
        data:JSON.stringify(record),
        success: function (data) {
          that.$loadingclose();
          console.log(data);  //鍦ㄦ帶鍒跺彴鎵撳嵃鏈嶅姟鍣ㄧ杩斿洖鐨勬暟鎹�
           if(data.code==200)
           {
            var re=data.result;
           
            console.log(re);
         that.$toast('报案成功');

           
           
           }
           else
           {
            that.$toast(data.message);
           
           }
           
           
           
            },
            error:function(){
              that.$loadingclose();
            that.$toast('服务器异常');
            }
            
            });
            
            }
            
            
  },
      handleAvatarSuccessa(res, file) {
      
      console.log(URL.createObjectURL(file.raw))
 
    this.imga = URL.createObjectURL(file.raw);
    this.pics.carda = {src:res.result,name:'carda'};

    // console.log(this.customercontent.zhizao)
    this.$loadingclose();
    this.$toast('选择成功')
  },
  handleAvatarSuccessb(res, file) {
      
      console.log(URL.createObjectURL(file.raw))
 
    this.imgb = URL.createObjectURL(file.raw);
    this.pics.cardb = {src:res.result,name:'cardb'};

    // console.log(this.customercontent.zhizao)
    this.$loadingclose();
    this.$toast('选择成功')
  },
  handleAvatarSuccessc(res, file) {
      
      console.log(URL.createObjectURL(file.raw))
 
    this.imgc = URL.createObjectURL(file.raw);
    this.pics.ssqk =  [{src:res.result,name:'ssqk'}];

    // console.log(this.customercontent.zhizao)
    this.$loadingclose();
    this.$toast('选择成功')
  },
  handleAvatarSuccessd(res, file) {
      
      console.log(URL.createObjectURL(file.raw))
 
    this.imgd = URL.createObjectURL(file.raw);
    this.pics.pfxy =  [{src:res.result,name:'pfxy'}];

    // console.log(this.customercontent.zhizao)
    this.$loadingclose();
    this.$toast('选择成功')
  },
  handleAvatarSuccesse(res, file) {
      
      console.log(URL.createObjectURL(file.raw))
 
    this.imge = URL.createObjectURL(file.raw);
    this.pics.kslpb = [{src:res.result,name:'kslpb'}];

    // console.log(this.customercontent.zhizao)
    this.$loadingclose();
    this.$toast('选择成功')
  },
  handleAvatarSuccessf(res, file) {
      
      console.log(URL.createObjectURL(file.raw))
 
    this.imgf = URL.createObjectURL(file.raw);
    this.pics.sqs =  [{src:res.result,name:'sqs'}];
    this.$loadingclose();
    // console.log(this.customercontent.zhizao)
    this.$toast('选择成功')
  },
  handleAvatarSuccessg(res, file) {
      
      console.log(URL.createObjectURL(file.raw))
 
    this.imgg = URL.createObjectURL(file.raw);
    this.pics.qt =  [{src:res.result,name:'qt'}];

    // console.log(this.customercontent.zhizao)
    this.$loadingclose();
    this.$toast('选择成功')
  },
      // handleAvatarSuccess(res, file) {
      //   this.imageUrl = URL.createObjectURL(file.raw);
      // },
      beforeAvatarUpload(file) {
        this.$loadingshow();	
        return true;
        // const isJPG = file.type === 'image/jpeg';
        // const isLt2M = file.size / 1024 / 1024 < 2;

        // if (!isJPG) {
        //   this.$message.error('上传头像图片只能是 JPG 格式!');
        // }
        // if (!isLt2M) {
        //   this.$message.error('上传头像图片大小不能超过 2MB!');
        // }
        // return isJPG && isLt2M;
      },

      handleChange(value) {
        console.log(value);
      }
    }
    }
  
</script>


<style lang="scss" scoped>
  .form-group{
    width: 30%;
  }
  .kv-item{
    color: slategray;

  }
  .impInfo{
    /* width:100px;
    text-align: right; */
    color: red;
    font-size: 14px;
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }


.subfild-content {
    margin-bottom: 2px;
    justify-content: space-between;
    display:flex;
}

</style>


